<template>
  <div class="content-detail">
    <div class="page-header">
      <h2>{{ isEdit ? '编辑内容' : (isAdd ? '添加内容' : '内容详情') }}</h2>
      <div>
        <el-button @click="goBack">返回</el-button>
        <el-button v-if="!isEdit && !isAdd" type="primary" @click="handleEdit">编辑</el-button>
        <el-button v-if="isEdit || isAdd" type="primary" @click="handleSave">保存</el-button>
      </div>
    </div>
    
    <el-card class="box-card">
      <el-form :model="contentForm" label-width="100px" :disabled="!isEdit && !isAdd">
        <el-form-item label="标题" prop="title">
          <el-input v-model="contentForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        
        <el-form-item label="类型" prop="type">
          <el-select v-model="contentForm.type" placeholder="请选择内容类型">
            <el-option label="文章" value="article"></el-option>
            <el-option label="视频" value="video"></el-option>
            <el-option label="课程" value="course"></el-option>
          </el-select>
        </el-form-item>
        
        <el-form-item label="作者" prop="author">
          <el-input v-model="contentForm.author" placeholder="请输入作者"></el-input>
        </el-form-item>
        
        <el-form-item label="封面" prop="cover">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
          >
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        
        <el-form-item label="摘要" prop="summary">
          <el-input type="textarea" v-model="contentForm.summary" rows="2" placeholder="请输入内容摘要"></el-input>
        </el-form-item>
        
        <el-form-item label="内容" prop="content">
          <el-input type="textarea" v-model="contentForm.content" rows="10" placeholder="请输入正文内容"></el-input>
        </el-form-item>
        
        <el-form-item label="标签" prop="tags">
          <el-tag
            v-for="tag in contentForm.tags"
            :key="tag"
            closable
            @close="removeTag(tag)"
            style="margin-right: 8px;">
            {{ tag }}
          </el-tag>
          <el-input
            v-if="inputVisible"
            ref="TagInput"
            v-model="inputValue"
            class="input-new-tag"
            size="small"
            @keyup.enter="addTag"
            @blur="addTag"
            style="width: 120px;"
          />
          <el-button v-else class="button-new-tag" size="small" @click="showInput">
            + 新标签
          </el-button>
        </el-form-item>
        
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="contentForm.status">
            <el-radio label="published">发布</el-radio>
            <el-radio label="draft">草稿</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { useRouter, useRoute } from 'vue-router'

export default {
  setup() {
    const router = useRouter()
    const route = useRoute()
    
    return {
      router,
      route
    }
  },
  data() {
    return {
      isEdit: false,
      isAdd: false,
      contentForm: {
        id: '',
        title: '',
        type: '',
        author: '',
        cover: '',
        summary: '',
        content: '',
        tags: [],
        status: 'draft',
        publishTime: '',
        views: 0
      },
      inputVisible: false,
      inputValue: ''
    }
  },
  created() {
    const route = this.route;
    this.isEdit = route.name === 'ContentEdit';
    this.isAdd = route.name === 'ContentAdd';
    
    if (!this.isAdd) {
      // 获取内容ID
      const id = route.params.id;
      // 这里获取内容详情数据
      this.fetchContentDetail(id);
    }
  },
  methods: {
    goBack() {
      this.router.push('/admin/content');
    },
    handleEdit() {
      const id = this.route.params.id;
      this.router.push(`/admin/content/edit/${id}`);
    },
    handleSave() {
      // 保存内容数据
      this.$message({
        type: 'success',
        message: '保存成功!'
      });
      this.goBack();
    },
    fetchContentDetail(id) {
      // 模拟获取数据
      if (id === '1') {
        this.contentForm = {
          id: 1,
          title: '每天30分钟运动的好处',
          type: 'article',
          author: '健康专家',
          cover: 'https://placeholder.pics/svg/200/E74C3C/FFFFFF/文章',
          summary: '坚持每天进行适量运动，对身心健康有很多好处。',
          content: '坚持每天30分钟的运动，对身体健康有以下好处：\n1. 增强心肺功能\n2. 提高免疫力\n3. 改善睡眠质量\n4. 减轻压力\n5. 控制体重\n\n长期坚持运动还可以降低患心脏病、糖尿病等慢性疾病的风险。',
          tags: ['运动', '健康', '生活习惯'],
          status: 'published',
          publishTime: '2023-11-01 10:30:00',
          views: 1250
        };
      }
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.TagInput.focus();
      });
    },
    addTag() {
      if (this.inputValue) {
        this.contentForm.tags.push(this.inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    removeTag(tag) {
      this.contentForm.tags.splice(this.contentForm.tags.indexOf(tag), 1);
    }
  }
}
</script>

<style scoped>
.content-detail {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.input-new-tag {
  width: 90px;
  margin-left: 8px;
  vertical-align: bottom;
}

.button-new-tag {
  margin-left: 8px;
}
</style> 